<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
            清楚默认的外边距和内填充
         */
        *{
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }
        #left_menu{
            width: 200px;
        }
        /*
            清楚列表中的符号
         */
        #left_menu ul{
            list-style: none;
        }
        #left_menu .menu_title{
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #f4f4f4;
            color: #660000;
            cursor: pointer;
            border-bottom: 2px solid white;
        }
        /*
            给标题添加鼠标操作的伪类,鼠标悬停
         */
        #left_menu .menu_title:hover{
            background-color: #d5fcff;
            color: cornflowerblue;
            text-align: left;
        }
        /*
            设置菜单项的样式，主要给 a设置即可
         */
        #left_menu .menu_item li{
            border-bottom: 2px solid white;
            background-color: #eef8ff;
        }
        #left_menu .menu_item a{
            text-decoration: none;
            display: block;
            height: 30px;
            line-height: 30px;
            text-align: center;

        }
        #left_menu .menu_item a:hover{
            background-color: gainsboro;
            color: white;
            margin-left: 5px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div id="left_menu">
        <!-- 收入菜单开始 -->
        <div class="menu">
            <div class="menu_title">
                收入维护
            </div>
            <div class="menu_item">
                <ul>
                    <li>
                        <a href="" target="">增加收入</a>
                    </li>
                    <li>
                        <a href="">查询收入</a>
                    </li>
                    <li>
                        <a href="">维护收入类型</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 收入菜单结束 -->
        <!-- 支出菜单开始 -->
        <div class="menu">
            <div class="menu_title">
                支出维护
            </div>
            <div class="menu_item">
                <ul>
                    <li>
                        <a href="">增加支出</a>
                    </li>
                    <li>
                        <!-- href对应的页面在target为main的位置显示 -->
                        <a href="searchZhiChu.html" target="main">查询支出</a>
                    </li>
                    <li>
                        <a href="">维护支出类型</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 支出菜单结束 -->
        <!-- 个人信息维护菜单开始 -->
        <div class="menu">
            <div class="menu_title">
                个人信息维护
            </div>
            <div class="menu_item">
                <ul>
                    <li>
                        <a href="">修改密码</a>
                    </li>
                    <li>
                        <a href="">修改个人信息</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 个人信息维护菜单结束 -->
    </div>
</body>
</html>